<template>
  <div v-loading.lock="loading" class="base-content">
    <div class="basic-info">
      <el-form ref="queryForm" :inline="true" :model="queryForm">
        <el-form-item label="消息类型" prop="messageType">
          <el-select
            v-model="queryForm.messageType"
            value-key="queryForm.messageType"
            placeholder="请选择"
          >
            <el-option key="0" label="请选择" value="0"></el-option>
            <el-option
              v-for="(item, index) in messageBusinessTypeList"
              :key="index.id"
              :label="item.name"
              :value="item.dictCode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="提醒时间" prop="createTime">
          <el-date-picker
            v-model="queryForm.createTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择提醒时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="消息状态">
          <CommonConfigSelectShow
            ref="CommonConfigSelectShowMessageStatus"
            :select-item="queryForm.statusCode"
            :show-type="{ key: 'MessageStatus' }"
          ></CommonConfigSelectShow>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onQuery">查询</el-button>
          <el-button @click="cancelForm">清空</el-button>
        </el-form-item>
      </el-form>

      <div class="base-content-operate">
        <el-select
          v-model="markTag"
          placeholder="标记为"
          width="150px"
          @change="markData"
        >
          <el-option key="0" label="标记为" value="0"></el-option>
          <el-option key="2" label="已读" value="2"></el-option>
          <el-option key="3" label="全部标记为已读" value="3"></el-option>
          <el-option key="1" label="未读" value="1"></el-option>
        </el-select>
      </div>

      <el-table
        :data="list"
        element-loading-text="Loading"
        fit
        highlight-current-row
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>

        <el-table-column label="消息状态">
          <template slot-scope="scope">
            <div :class="scope.row.statusCode === '未读' ? 'unread' : 'read'">
              {{ scope.row.statusCode }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="消息类型">
          <template slot-scope="scope">
            {{ scope.row.messageTypeName }}
          </template>
        </el-table-column>
        <el-table-column label="编号">
          <template slot-scope="scope">
            {{ scope.row.businessNum }}
          </template>
        </el-table-column>
        <el-table-column label="提醒内容">
          <template slot-scope="scope">
            {{ scope.row.content }}
          </template>
        </el-table-column>
        <el-table-column label="提醒时间">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="base-table-operation">
              <el-link type="primary" @click="showDetail(scope.row)"
                >查看详情</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

      <BasePagination
        :total="pagination.total"
        :current-page="pagination.pageIndex"
        :page-count="pagination.total"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
    </div>
  </div>
</template>

<script>
import { markRead, getList } from "../../../api/Message/MessageHistory.js";
import {getDictList} from "@/ModuleSystem/api/System/SystemDict.js";
import CommonConfigSelectShow from "@/ModuleSystem/components/System/CommonConfigSelectShow.vue";
export default {
  name: "MessageHistoryList",
  components: { CommonConfigSelectShow},
  data() {
    return {
      loading: true,
      list: [],
      queryForm: {
        statusCode: 0,
        messageType: "",
        createTime: "",
      },
      dialogFormVisible: false,
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
      selectTableData: [], // 选中的数据
      markTag: "0", // 标记
      messageBusinessTypeList: [],
    };
  },
  created() {
    this.getList();
    this.getMessageBusinessType();
  },
  methods: {
    changePage(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    cancelForm() {
      this.$refs.queryForm.resetFields();
      this.$refs.CommonConfigSelectShowMessageStatus.currentSelectItem = 0;
      this.queryForm.statusCode = 0;
      this.pagination.pageIndex = 1;
      this.getList();
    },
    handleSelectionChange(val) {
      this.selectTableData = val;
    },
    markData() {
      if (this.markTag === "0") {
        return;
      }
      if (
        (this.markTag === "1" || this.markTag === "2") &&
        (!this.selectTableData || this.selectTableData.length <= 0)
      ) {
        this.markTag = "0";
        this.$message.error("请选择数据");
        return;
      }

      this.loading = true;

      var tmpIds = [];
      if (this.markTag === "1" || this.markTag === "2") {
        this.selectTableData.forEach((element) => {
          tmpIds.push(element.id);
        });
      }
      markRead({ statusCode: this.markTag, ids: tmpIds })
        .then((res) => {
          this.loading = false;
          this.getList();
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getList() {
      this.loading = true;
      this.list = [];
      getList(this.queryForm, this.pagination)
        .then((res) => {
          setTimeout(() => {
            var tmpMessageStatus =
              this.$refs.CommonConfigSelectShowMessageStatus.fromData;
            if (res.data.dataList) {
              res.data.dataList.forEach((element) => {
                element["statusCode"] = this.Helper.EachArrayFindItem(
                  tmpMessageStatus,
                  "key",
                  element.statusCode
                ).value;
              });
              this.list = res.data.dataList;
              this.pagination.total = res.data.total;
            } else {
              this.pagination.total = 0;
            }
            this.loading = false;
          }, 500);
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getMessageBusinessType() {
   getDictList({ dictCode: "MessageBusinessType" }).then((res) => {
        this.messageBusinessTypeList = res.data;
      });
    },
    onQuery() {
      this.queryForm.statusCode =
        this.$refs.CommonConfigSelectShowMessageStatus.currentSelectItem;
      this.getList();
    },
    showDetail(row) {
      // 字典表中配置参考
      // query 为具体业务的查询字段.同时需要在对应业务页面的created hook中赋值 this.queryForm.num = this.$route.query.num;
      // {"path":"/AAA/BBB","query":"num","origin":{"a":1,"b":"1"}}
      var tmpMessageTypeTarget = JSON.parse(row.messageTypeTarget);
      var tmpQuery = {};
      tmpQuery[tmpMessageTypeTarget.query] = row.businessNum;
      if (tmpMessageTypeTarget.origin) {
        for (var key in tmpMessageTypeTarget.origin) {
          tmpQuery[key] = tmpMessageTypeTarget.origin[key];
        }
      }
      this.$router.push({
        path: tmpMessageTypeTarget.path,
        query: tmpQuery,
      });
    },
  },
};
</script>

<style scoped>
.unread {
  text-align: center;
  color: #ffffff;
  width: 47px;
  height: 17px;
  background: #3e9cf3;
  border-radius: 9px;
  font-size: 10px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 14px;
}
.read {
  text-align: center;
  color: #ffffff;
  width: 47px;
  height: 17px;
  background: #acb0b8;
  border-radius: 9px;
  font-size: 10px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 14px;
}
.viewDetail {
  color: #1890ff;
}
</style>
